import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import '../Assets/login.css'
function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate(); // 使用useNavigate钩子

    const handleLogin = (event) => {
        event.preventDefault();
        if (!username || !password) {
            setError('用户名和密码不能为空');
            return;
        }

        setError('');

        // 执行登录逻辑，这里假设登录总是成功
        // 登录成功后，使用navigate进行页面跳转
        // 你可以将需要传递的数据放在state参数中
        navigate('/home', { state: { username: username } });
    };


    const containerStyle = {
        display: 'flex', // 启用 flex 布局
        justifyContent: 'center', // 水平居中
        alignItems: 'center', // 垂直居中
        height: '100vh', // 容器高度设置为视口的100%
    };

    const formStyle = {
        padding: '20px',
        border: '1px solid #ddd',
        borderRadius: '5px',
        maxWidth: '300px',
        color:'white',
        background:'/file/login.png',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', // 可选：添加阴影效果增加立体感
    };

    const inputStyle = {
        margin: '10px 0',
        width: '100%',
        padding: '8px',
        border: '1px solid #ddd',
        borderRadius: '4px',
    };

    const buttonStyle = {
        width: '100%',
        padding: '10px',
        border: 'none',
        backgroundColor: '#007bff',
        color: 'white',
        borderRadius: '4px',
        cursor: 'pointer',
    };

    const errorMessageStyle = {
        color: 'red',
        marginBottom: '10px',
    };

    return (
        <div style={containerStyle}>
            <form onSubmit={handleLogin} style={formStyle}>
                {error && <div style={errorMessageStyle}>{error}</div>}
                <div>
                    <label>
                        用户名:
                        <input
                            type="text"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            style={inputStyle}
                        />
                    </label>
                </div>
                <div>
                    <label>
                        密码:
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            style={inputStyle}
                        />
                    </label>
                </div>
                <button type="submit" style={buttonStyle}>登录</button>
            </form>
        </div>
    );
}

export default Login;